<template>
  <transition name="page">
    <div class="wrapper">
      <component-back :title="title"></component-back>
      <div class="address">
        <p class="title">公司住址</p>
        <textarea class="input-address"
                  maxlength="140"
                  border-bottom-1px
                  placeholder="请输入地址"
                  ref="address"></textarea>
      </div>
      <component-button :content="save"
                        @submit="handleSumit"></component-button>
    </div>
  </transition>
</template>

<script>
import ComponentBack from 'common/back'
import ComponentButton from 'common/button'
import {
  Toast
} from 'vant'
export default {
  name: 'MeAddress',
  components: {
    ComponentBack,
    ComponentButton
  },
  data () {
    return {
      title: '我的地址',
      save: '保存',
      address: ''
    }
  },
  methods: {
    getAdress () {
      this.$api.person.getAddress()
        .then(this.getAdressSucc)
    },
    getAdressSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      const LOGIN_CODE = this.$api.LOGIN_CODE
      res = res.data
      if (res.code === CODE_OK && res.data) {
        const data = res.data
        this.address = data
        this.$refs.address.value = data
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    },
    postAddress () {
      const address = this.$refs.address.value
      if (address === this.address || address === '') {
        return
      }
      this.$api.person.postAddress({ address })
        .then(this.postAdressSucc)
    },
    postAdressSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      res = res.data
      if (res.code === CODE_OK && res.data) {
        const msg = res.msg
        Toast({
          message: msg,
          duration: 1000,
          forbidClick: true
        })
      }
    },
    handleSumit () {
      this.postAddress()
    }
  },
  created () {
    this.getAdress()
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  position absolute
  z-index 10
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc
  touch-action none

.address
  margin-top 101px
  padding()

  .title
    font-size $common_fz
    font-weight 500
    color $location
    line-height 52px

  .input-address
    resize none
    line-height 42px
    width 100%
    min-height 120px
    padding-bottom 28px
    box-sizing border-box
    font-size $shop_name
    font-weight 500
    color $common_fz_color
    line-height 42px

.page-enter-active, .page-leave-active
  transition all 0.3s

.page-enter, .page-leave-active
  transform translate3d(100%, 0, 0)
</style>
